<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <title>题库</title>
  <th:block th:include="common/public::layui"></th:block>
  <style>
    .layui-card-header {
      height: 80px;
      line-height: 30px;
      font-size: 20px;
      cursor: pointer;
      border-bottom-color: #ddd;
      padding-top: 10px;
    }

    .layui-card {
      border-radius: 10px;
      border: 1px solid #ddd;
    }

    .layui-input-inline {
      margin: 0 !important;
    }
  </style>
</head>
<body style="background-color: #fff">
<div class="layui-col-md12" style="text-align: center;margin-top: 15px;z-index: 100000">
  <form class="layui-form layui-form-pane" action="" style="display: inline-block">
    <div class="layui-form-item">
      <label class="layui-form-label">题库查询</label>
      <div class="layui-input-inline">
        <input type="text" name="answerType" id="answerType" placeholder="请输入题库名称" autocomplete="off" class="layui-input"/>
      </div>
      <div class="layui-input-inline" style="width: auto">
        <button class="layui-icon layui-icon-search layui-btn" lay-submit="" lay-filter="*"></button>
      </div>
    </div>
  </form>
</div>

<div class="layui-container">
  <div id="layui-container" class="layui-row layui-col-space10"></div>
</div>

<div class="layui-col-md12" id="page" style="text-align: center"></div>

<script type="text/html" id="cardTemplate">
  <div class="layui-col-md3 layui-col-sm4">
    <div class="layui-card" style="max-width: 250px;margin: 15px auto">
      <div class="layui-card-header" style="color: #01AAED">
        <div id="title" style="height: 60px;overflow: hidden">
          <i class="layui-icon layui-icon-template-1" style="color: #01AAED;font-size: 20px"> </i>
        </div>
      </div>
      <div class="layui-card-body">
        <i class="layui-icon layui-icon-list"></i> 份考卷
      </div>
    </div>
  </div>
</script>
<script>
  layui.use(['jquery', 'laypage', 'form'], function () {
    var $ = layui.$;
    var layPage = layui.laypage;
    var form = layui.form;
    //题库点击事件
    $('body').on('click', '.layui-card-header', function () {
      location.href = prefixUrl + '/answerCard/list?answerType=' + $(this).attr("data-answerType");
    });
    //首次加载
    getLibrary({curr: 1, limit: 12, first: true});
    //查询点击事件
    form.on('submit(*)', function (data) {
      getLibrary({curr: 1, limit: 12, first: true});
      return false;
    });

    //  分页加载
    function page(count) {
      layPage.render({
        elem: 'page',
        count: count,
        limit: 12,
        jump: function (obj, first) {
          if (!first) {
            getLibrary(obj);
          }
        }
      });
    }

    //题库加载
    function getLibrary(obj) {
      $.get(prefixUrl + '/dic/getByAnswerType', {page: obj.curr, limit: obj.limit, answerType: $('#answerType').val()}, function (res) {
        if (res.list) {
          $('#layui-container').empty();
          obj.count = res.total;
          $.each(res.list, function (index, elem) {
            var card = $($('#cardTemplate').html());
            $('.layui-icon-template-1', card).after(elem.dicValue.length > 16 ? elem.dicValue.substr(0, 16) + '......' : elem.dicValue);
            $('.layui-icon-list', card).after(' ' + elem.answerTypeCount);
            $('.layui-card-header', card).attr('data-answerType', elem.dicKey);
            $('.layui-card-header', card).attr('title', elem.dicValue);
            $('#layui-container').append(card);
          });
          if (obj.first) {
            page(res.total);
          }
        }
      }, 'json');
    }
  });
</script>
</body>
</html>